<template>
	<view class="i-vipOrderItem">
		<view class="card_title">
			<text class="titles">会员专区</text>
			<text class="status"
				v-if="data.goodsExpressStatus === '10007005' && data.goodsOrderStatus === '10007002'">待发货</text>
			<text class="status"
				v-else-if="data.goodsExpressStatus === '10007006' && data.goodsOrderStatus === '10007002'">待收货</text>
			<text class="status"
				v-else-if="data.goodsExpressStatus === '10007007' && data.goodsOrderStatus === '10007002'">已完成</text>
			<text class="status" v-else>{{goods_order_status[data.goodsOrderStatus]}}</text>
		</view>
		<view class="card_center">
			<view class="center_left">
				<view class="image">
					<image :src="data.goodsImage" mode=""></image>
				</view>
				<view class="title_name">
					<view class="names">{{data.goodsName}}</view>
					<text class="timer">{{vipLevel[data.vipLevel]}}</text>
					<view class="priceS">
						<i-price>{{data.payPrice}}</i-price>
						<text>￥{{data.price}}</text>
					</view>
				</view>
			</view>
			<view style="color: #8E8E93;">x 1</view>
		</view>
		<view class="payTitle">
			<text>实付款</text>
			<i-price>{{data.payPrice}}</i-price>
		</view>
		<view class="buttons">
			<i-buttons @click="toPay" v-if="data.goodsOrderStatus === '10007001'" color="#FB652E"
				border="#FB652E">立即支付</i-buttons>
			<i-buttons style="margin-left: 32rpx;" v-if="data.goodsExpressStatus === '10007006'" @click='toCheckW'
				color="#FB652E" border="#F0F0F2">查看物流</i-buttons>
			<i-buttons @click="confirm" style="margin-left: 32rpx;" bgColor="#FB652E" color="#fff"
				v-if="data.goodsExpressStatus === '10007006'">确认收货</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { navTo } from '../../utils/common';
	import {
		goods_order_status,
		vipLevel
	} from '../../utils/enums';
	import useStore from '../../stores/index';
	import { defineProps, defineEmits } from "vue";

	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		} as any
	})

	const store = useStore()
	const emit = defineEmits(['take'])

	const toPay = () => {
		navTo(`/pages/views/cashier?type=vip&orderId=${props.data.orderId}&price=${props.data.payPrice}&lastTime=${props.data.createTime}`,
			'navigateTo')
	}

	const toCheckW = () => {
		store.setOilUrl(`https://m.kuaidi100.com/result.jsp?nu=${props.data.expressNo}`)
		navTo(`/pages/views/web_view`, 'navigateTo')
	}

	const confirm = () => {
		emit('take', props.data)
	}
</script>

<style lang="scss" scoped>
	.i-vipOrderItem {
		.card_title {
			@include flexRS;
			border-bottom: 1rpx solid $line-color;
			padding-bottom: 32rpx;

			.titles {
				@include titlefont(28rpx);
			}

			.status {
				@include contentfont(26rpx);
			}

			margin-bottom: 24rpx;
		}

		.card_center {
			@include flexRS;
			align-items: flex-start;

			.center_left {
				@include flexR;
				align-items: flex-start;
				width: 80%;

				.image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 24rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}


				.title_name {
					@include flexC;
					width: 80%;

					.names {
						@include titlefont(28rpx);
						@include overflow;
						width: 100%;
					}

					.timer {
						margin-top: 12rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: $content-color;
					}

					.priceS {
						@include flexR;

						text {
							@include contentfont(26rpx);
							margin-left: 8rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.payTitle {
			@include flexR;
			justify-content: flex-end;
		}

		text {
			@include contentfont(26rpx);
			margin-right: 12rpx;
		}

		.buttons {
			margin-top: 36rpx;
			@include flexR;
			justify-content: flex-end;
		}
	}
</style>